<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useOrderStore } from '@/store/modules/order'
import { ElMessageBox } from 'element-plus'
import PaymentDialog from '@/components/PaymentDialog/index.vue'

const orderStore = useOrderStore()
const router = useRouter()

// 支付弹窗相关
const paymentDialogVisible = ref(false)
const currentOrderId = ref('')

// 辅助函数，获取状态对应的标签类型
const getStatusType = status => {
  const statusMap = {
    待支付: 'warning', // 待付款
    待发货: 'info', // 待发货
    待收货: 'primary', // 已发货
    已作废: 'danger', // 已取消
  }
  return statusMap[status] || 'info'
}

// 辅助函数，获取状态对应的显示文本
const getStatusLabel = status => {
  const statusMap = {
    0: '待付款',
    1: '待发货',
    2: '已发货',
    3: '已取消',
  }
  return statusMap[status] || status
}

// 查看订单详情
const viewOrderDetail = orderId => {
  console.log('查看订单详情:', orderId)
  // 实际项目中可以跳转到订单详情页
  // router.push({ path: `/order/detail/${orderId}` })
}

// 初始化加载订单列表
onMounted(() => {
  orderStore.fetchOrderList()
})

// 取消订单
const cancelOrder = orderBn => {
  ElMessageBox.confirm('确定要取消该订单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    orderStore.cancelOrder(orderBn)
  })
}

// 去支付 - 打开支付弹窗
const goToPay = id => {
  currentOrderId.value = id
  paymentDialogVisible.value = true
}

// 支付成功后刷新订单列表
const handlePaymentSuccess = () => {
  orderStore.fetchOrderList()
}
</script>

<template>
  <div class="order-list-container">
    <div class="filter-container">
      <el-radio-group v-model="orderStore.currentStatus" @change="orderStore.changeOrderStatus">
        <el-radio-button v-for="option in orderStore.statusOptions" :key="option.value" :value="option.value">
          {{ option.label }}
        </el-radio-button>
      </el-radio-group>
    </div>

    <el-table v-loading="orderStore.loading" :data="orderStore.orderList" border>
      <el-table-column type="expand" width="40">
        <template #default="{ row }">
          <div class="mx-4 my-2 border-b-slate-600 flex" v-for="item in row.detail" :key="item.id">
            <img
              :src="`https://image.ezfclouds.com/storage/app/public/${item.goods.images[0].path}`"
              alt="Product Image"
              width="100"
              height="100"
              class="mr-4"
            />
            <div class="product-info">
              <p class="my-2">商品名称：{{ item.goods_name }}</p>
              <p class="my-2">商品价格：{{ item.goods_price }}</p>
              <p class="my-2">购买数量：{{ item.num }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="order_bn" label="订单编号" width="160" />
      <el-table-column prop="created_at" label="下单时间" width="180" />
      <el-table-column prop="member_address" label="收货地址">
        <template #filter-icon="slotProps"></template>
      </el-table-column>
      <el-table-column prop="amount" label="订单金额" width="120">
        <template #default="{ row }">
          <span>¥{{ row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="订单状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.order_status)">
            {{ getStatusLabel(row.order_status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{ row }">
          <!-- 待付款状态显示取消订单和去付款按钮 -->
          <div v-if="row.order_status === '待支付'" class="operation-buttons">
            <el-button size="small" @click="cancelOrder(row.order_bn)">取消订单</el-button>
            <el-button type="primary" size="small" @click="goToPay(row.order_id)">去付款</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="orderStore.pagination.currentPage"
        v-model:page-size="orderStore.pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        size="default"
        layout="total, sizes, prev, pager, next"
        :total="orderStore.pagination.total"
        @size-change="orderStore.handleSizeChange"
        @current-change="orderStore.handlePageChange"
      />
    </div>
  </div>

  <!-- 支付弹窗 -->
  <PaymentDialog
    v-model:visible="paymentDialogVisible"
    :order-id="currentOrderId"
    @payment-success="handlePaymentSuccess"
  />
</template>

<style lang="scss" scoped>
.order-list-container {
  padding: 20px;

  .filter-container {
    margin-bottom: 20px;
  }

  .operation-buttons {
    display: flex;
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
